<template>
  <div class="main">
    <div class="title">定 时 点 详 细 信 息</div>
    <div class="oneToThirteen">
      <div
        class="TimingPointInfo"
        v-for="(item, index) in TimingPointData"
        :key="index"
      >
        <span class="index">{{ index+1 }}、</span>
        <span class="inforName">{{ item.inforName }}:</span>
        <span class="pointData">{{ item.pointData }}</span>
      </div>
    </div>
    <div class="table">
      <div class="leftTable">
        <el-table :data="tableData" border style="width: 100%;height: 100%;">
        <el-table-column  type="index"  min-width="15" label="序号">
        </el-table-column>
        <el-table-column prop="deviceNumber" label="设备号" min-width="30"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" min-width="40"></el-table-column>
        <el-table-column prop="volumn" label="音量" min-width="15"></el-table-column>
      </el-table> 
      </div>
      <div class="rightTable">

        <el-table :data="tableData" border style="width: 100%;height: 100%;">
        <el-table-column  type="index"  min-width="15" label="序号">
        </el-table-column>
        <el-table-column prop="musicName" label="音乐名称"></el-table-column>
      </el-table>

      </div>
    </div>
    <div class="button">
      <button @click="back">返 回</button>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
const back=()=>{
  router.go(-1)
}
const TimingPointData = ref([
  {
    inforName: "名称",
    pointData:'TIMING1'
  },
  {
    inforName: "定时方式",
    pointData:'7,1,2,3,4,5'
  },
  {
    inforName: "起始日期",
    pointData:'-----'
  },
  {
    inforName: "终止日期",
    pointData:'------'
  },
  {
    inforName: "开始时间",
    pointData:'11:30:27'
  },
  {
    inforName: "结束日期",
    pointData:'11:36:05'
  },
  {
    inforName: "定时类型",
    pointData:'普通类'
  },
  {
    inforName: "歌曲类型",
    pointData:'MP3'
  },
  {
    inforName: "终端电源",
    pointData:'Default'
  },
  {
    inforName: "主机电源",
    pointData:'CH1:Default'
  },
  {
    inforName: "所选分区",
    pointData:''
  },
  {
    inforName: "所选音乐",
    pointData:''
  }
]);
</script>
<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  background: rgb(250, 250, 250);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .title {
    height: 10%;
    width: 98%;
    text-align: center;
    font-size: 2vw;
    font-weight: 900;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .oneToThirteen {
    height: 30%;
    width: 90%;
    // background: rebeccapurple;
    display: flex;
    justify-content: space-around;
    // align-items: center;
    flex-wrap: wrap;
    .TimingPointInfo{
      width: 45%;
      height: 10%;
      // background: #4782ba;
      margin: 1vh;
      display: flex;
      font-weight: 600;
      font-size: 1.2vw;
      .index{
        width: 6%;
        margin-right: 0.1vw;
        display: flex;
        justify-content:flex-start;
        align-items: center;
      }
      .inforName{
        width: 18%;
        display: flex;
        justify-content:flex-start;
        align-items: center;
      }
      .pointData{
        display: flex;
        justify-content: flex-start;
        // justify-content: center;
        align-items: center;
        width: 60%;
      }
    }
  }
  .table {
    margin-top: 2%;
    width: 90%;
    height: 50%;
    // background: yellow;
    display: flex;
    justify-content: space-between;
    div{
      height: 100%;
      width: 48%;
      border-radius: 1vh;
      background: rgb(220,220,220);
    }
  }
  .button {
    width: 98%;
    height: 5%;
    // background: green;
    margin-top: 2vh;
    display: flex;
    justify-content: flex-end;
    button {
      height: 4vh;
      width: 8vw;
      font-size: 1vw;
      font-weight: 800;
      //   position: absolute;
      right: 0;
      bottom: 0;
      background-color: #4782ba;
      color: aliceblue;
      border-radius: 0.5vh;
      border: 0ch;
      cursor: pointer;
    }
  }
}

:deep .el-table .cell {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 3vh;
    padding: 0 1vw;
}

:deep .cell {
    font-size: 1vw;
    color: black;
}
</style>